<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>供应商信息</title>
    <!--top信息-->
    <link rel="icon" href="static/images/favicon.ico" type="image/ico">
    <div th:replace="public/pc :: top"></div>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="public/pc :: navigation"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="public/pc :: head"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form-inline" action="lyear_forms_elements.html" method="post"
                                      onsubmit="return false;">
                                    <div class="form-group">
                                        供应商名称：
                                        <input class="form-control" type="text" id="vendorName"
                                               name="vendorName" placeholder="请输入名称">
                                        手机号码：
                                        <input class="form-control" type="text" id="mobile"
                                               name="mobile" placeholder="请输入手机号">
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-success" type="submit" id="flushed">查询</button>
                                        <a class="btn btn-primary m-r-5 example-p-3" href="#" id="addCategory"><i
                                                class="mdi mdi-plus"></i> 新增</a>
                                    </div>
                                </form>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>供应商名称</th>
                                            <th>联系人</th>
                                            <th>手机号码</th>
                                            <th>邮箱</th>
                                            <th>备注</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="categoryInfoBody">
                                        <!--                                        此处展示相关数据-->
                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination" id="paginatedInfo">
                                    <!--                                    展示分页导航-->
                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="static/js/main.min.js"></script>
<!--对话框-->
<script type="text/javascript" src="static/js/jconfirm/jquery-confirm.min.js"></script>
<!--消息提示-->
<script type="text/javascript" src="static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="static/js/lightyear.js"></script>

<script type="text/javascript">
    $(function () {
        $('.search-bar .dropdown-menu a').click(function () {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });

    // 全局变量
    let pageNum = 1, pageSize = 10;

    // 添加信息
    $('#addCategory').on('click', function () {
        $.confirm({
            title: '新增分类',
            content: '' +
                '<div class="form-group">' +
                '<label>供应商名称</label>' +
                '<input type="text" placeholder="供应商名称" class="vendorName form-control" required />' +
                '<label>联系人名称</label>' +
                '<input type="text" placeholder="联系人名称" class="userName form-control" required />' +
                '<label>联系电话</label>' +
                '<input type="text" placeholder="联系电话" class="mobile form-control" required />' +
                '<label>邮箱</label>' +
                '<input type="text" placeholder="邮箱" class="email form-control" required />' +
                '<label>备注</label>' +
                '<input type="text" placeholder="备注" class="remark form-control" required />' +
                '</div>',
            buttons: {
                formSubmit: {
                    text: '提交',
                    btnClass: 'btn-blue',
                    action: function () {
                        const vendorName = this.$content.find('.vendorName').val();
                        const userName = this.$content.find('.userName').val();
                        const mobile = this.$content.find('.mobile').val();
                        const email = this.$content.find('.email').val();
                        const remark = this.$content.find('.remark').val();
                        if (!vendorName) {
                            $.alert('请输入供应商名称名称！');
                            return false;
                        }
                        lightyear.loading('show');
                        $.ajax({
                            type: "post",
                            url: "/vendorInfo/addVendorInfo",
                            data: {
                                vendorName: vendorName,
                                userName: userName,
                                mobile: mobile,
                                email: email,
                                remark: remark,
                            },
                            dataType: "json",
                            success: function (data) {
                                lightyear.loading('hide');
                                // 添加成功
                                if (data.code === 200) {
                                    lightyear.notify(data.msg, 'success', 300);
                                } else {
                                    lightyear.notify(data.msg, 'danger', 100);
                                    return;
                                }
                                // 刷新数据
                                getVendorInfo();
                            },
                            error: function (data) {
                                lightyear.loading('hide');
                                console.log(data);
                                lightyear.notify("服务器错误，请联系管理员！", 'danger', 100);
                            }
                        })

                    }
                },
                cancel: {
                    text: '取消'
                },
            },
        });
    });

    // 修改
    function editCategory(categoryId, categoryName) {
        $.confirm({
            title: '提示',
            content: '' +
                '<div class="form-group">' +
                '<label>请输入分类名称</label>' +
                '<input type="text" placeholder="名称" class="name form-control" required value="' + categoryName + '" />' +
                '</div>',
            buttons: {
                formSubmit: {
                    text: '提交',
                    btnClass: 'btn-blue',
                    action: function () {
                        var categoryName = this.$content.find('.name').val();
                        if (!categoryName) {
                            $.alert('请输入名称！');
                            return false;
                        }
                        // $.alert('您的姓名是： ' + name);
                        lightyear.loading('show');
                        $.ajax({
                            type: "post",
                            url: "/categoryInfo/editCategoryInfo",
                            data: {categoryId: categoryId, categoryName: categoryName},
                            dataType: "json",
                            success: function (data) {
                                // 修改成功
                                if (data.code === 200) {
                                    lightyear.loading('hide');
                                    lightyear.notify(data.msg, 'success', 300);
                                } else {
                                    lightyear.loading('hide');
                                    lightyear.notify(data.msg, 'danger', 100);
                                    return;
                                }
                                // 刷新数据
                                getVendorInfo();
                            },
                            error: function (data) {
                                lightyear.loading('hide');
                                console.log(data);
                                lightyear.notify("服务器错误，请联系管理员！", 'danger', 100);
                            }
                        })

                    }
                },
                cancel: {
                    text: '取消'
                },
            },
        });
    }

    // 修改供应商状态
    function editVendorInfoStatus(id, status) {
        status = status === 0 ? 1 : 0;
        lightyear.loading('show');
        $.ajax({
            type: "post",
            url: "/vendorInfo/editVendorInfoStatus",
            data: {
                id: id,
                status: status,
            },
            dataType: "json",
            success: function (data) {
                lightyear.loading('hide');
                // 修改成功
                if (data.code === 200) {
                    lightyear.notify(data.msg, 'success', 300);
                } else {
                    lightyear.notify(data.msg, 'danger', 100);
                    return;
                }
                // 刷新数据
                getVendorInfo();
            },
            error: function (data) {
                lightyear.loading('hide');
                console.log(data);
                lightyear.notify("服务器错误，请联系管理员！", 'danger', 100);
            }
        })
    }

    // 共用的查询 function
    function getVendorInfo() {
        let vendorName = $("#vendorName").val();
        let mobile = $("#mobile").val();
        lightyear.loading('show');
        let ghtml = "";
        $.ajax({
            type: "post",
            url: "/vendorInfo/getAllVendorInfo",
            data: {
                pageNum: pageNum,
                pageSize: pageSize,
                vendorName: vendorName,
                mobile: mobile,
            },
            dataType: "json",
            success: function (data) {
                lightyear.loading('hide');
                console.log(data);
                if (null != data.data) {
                    // 填充数据
                    $.each(data.data.result, function (i, item) {
                        // alert(item)
                        ghtml += '<tr>';
                        // 添加数据信息
                        ghtml += '<td>' + item.id + '</td>';
                        ghtml += '<td>' + item.vendorName + '</td>';
                        ghtml += '<td>' + item.userName + '</td>';
                        ghtml += '<td>' + item.mobile + '</td>';
                        ghtml += '<td>' + item.email + '</td>';
                        ghtml += '<td>' + item.remark + '</td>';
                        if (item.status === 0) {
                            ghtml += '<td> <font class="text-success"> 正常 </font></td>';
                        } else {
                            ghtml += '<td> <font class="text-error"> 停用 </font></td>';
                        }
                        ghtml += '<td><div class="btn-group">' +
                            '<a class ="btn btn-cyan" title="编辑" data-toggle="tooltip" onclick="editCategory(' + item.categoryId + ', `' + item.categoryName + '`)"><i class ="mdi mdi-pencil">编辑</i></a>';
                        // '<a class ="btn btn-xs btn-default" title="查看" data-toggle="tooltip"><i class ="mdi mdi-eye"></i></a>' +
                        if (item.status === 0) {
                            ghtml += '<a class ="btn btn-danger" title="停用" data-toggle="tooltip" onclick="editVendorInfoStatus(' + item.id + ',' + item.status + ')"><i class ="mdi mdi-window-close">停用</i></a>';
                        } else {
                            ghtml += '<a class ="btn btn-success" title="启用" data-toggle="tooltip" onclick="editVendorInfoStatus(' + item.id + ',' + item.status + ')"><i class ="mdi mdi-check">启用</i></a>';
                        }
                        ghtml += '</div></td>';
                        ghtml += '</tr>';
                    })
                    $("#categoryInfoBody").html(ghtml); // 添加数据
                    // 保存分页信息
                    pageNum = data.data.pageNum;
                    pageSize = data.data.pageSize;
                    // 调用分页方法
                    paginated(pageNum, data.data.pages, pageSize, data.data.total);
                }
            },
            error: function (data) {
                lightyear.loading('hide');
                console.log(data);
                lightyear.notify("服务器错误，请联系管理员！", 'danger', 100);
            }
        })
    }

    // 查询分页页面
    function getCategoryInfoByPaginated(num, size) {
        // 保存分页信息
        pageNum = num;
        pageSize = size;
        getVendorInfo();
    }

    // 分页导航
    function paginated(pageNum, pages, pageSize, total) {
        // 计算需要显示的页面
        let begin = 1 >= (pageNum - 4) ? 1 : (pageNum - 4);
        let end;
        if (pageNum < 4) {
            end = pages < 8 ? pages : 8;
        } else {
            end = pages < (pageNum + 4) ? pages : (pageNum + 4);
        }

        let ghtml = '';
        if (pageNum === 1) {
            ghtml += '<li class="disabled"><span>«</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getCategoryInfoByPaginated(' + 1 + ',' + pageSize + ')"> » </a></li>'
        }
        for (let i = begin; i < end; i++) {
            if (pageNum === i) {
                ghtml += '<li class="active"><span>' + i + '</span></li>'
            } else {
                ghtml += '<li><a href="#1" onclick="getCategoryInfoByPaginated(' + i + ',' + pageSize + ')">' + i + '</a></li>'
            }
        }
        if (pages > pageNum + 8) {
            ghtml += '<li class="disabled"><span>...</span></li>'
        }
        if (pageNum === pages) {
            ghtml += '<li class="active"><span>' + pages + '</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getCategoryInfoByPaginated(' + pages + ',' + pageSize + ')"> ' + pages + ' </a></li>'
        }

        if (pageNum === pages) {
            ghtml += '<li class="disabled"><span>»</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getCategoryInfoByPaginated(' + pages + ',' + pageSize + ')"> » </a></li>'
        }
        ghtml += '<span>共 ' + total + ' 条数据</span'
        $("#paginatedInfo").html(ghtml); // 添加数据
    }

    // 点击查询
    $("#flushed").click(function () {
        getVendorInfo();
    })

</script>
</body>
</html>